// 检查是否为移动端
function updateIsMobile() {
    return window.innerWidth <= 768;
}

// 初次加载时设置布局
let isMobile = updateIsMobile();

// 检查屏幕尺寸并设置类名
function updateLayoutClass() {
    const html = document.documentElement;
    html.className = isMobile ? 'mobile' : 'pc';
}

// 活动上传作品的开始时间和结束时间
let startTime = new Date(upStartTime).getTime(); // 使用时间戳
let endTime = new Date(upEndTime).getTime();
let awardsTime = new Date(awardTime).getTime();

// 获取当前时间的时间戳
function getCurrentTimeTimestamp(timeStr) {
    return new Date(timeStr).getTime();
}

// 检查当前时间是否在开始和结束时间范围内
function isWithinTimeRange(startTime, endTime) {
    let currentTimeN = getCurrentTimeTimestamp(currentTime);
    return currentTimeN >= startTime && currentTimeN <= endTime;
}

// 隐藏/显示获奖公示菜单项
function toggleAwardMenuVisibility() {
    // 获取 PC 和移动端的菜单项元素
    let pcAwardMenuItem = document.querySelector('.navi-block-menu li:nth-child(8)'); // PC版的第8个li
    let mobileAwardMenuItem = document.querySelector('.mobile-menu-content-list-item:nth-child(8)'); // 移动版的第8个项
    // 判断当前时间是否在结束时间之后
    if (getCurrentTimeTimestamp(currentTime) > awardsTime) {
        // 11月11日 00:00:00之后，显示获奖公示
        pcAwardMenuItem.style.display = 'flex';
        mobileAwardMenuItem.style.display = 'block';
    } else {
        // 11月11日之前，隐藏获奖公示
        pcAwardMenuItem.style.display = 'none';
        mobileAwardMenuItem.style.display = 'none';
    }
}

// 更新倒计时元素的显示
function updateCountdownElement(elementClass, days) {
    const countdownElement = document.querySelector(`.${elementClass}`);
    if (days > 0) {
        countdownElement.textContent = days.toString().padStart(2, '0');
    } else {
        countdownElement.textContent = '00';
    }
}

// 根据当前时间更新 fixed-card 的显示/隐藏状态和倒计时
function updateFixedCardAndCountdown() {
    const fixedCard = isMobile ? document.querySelector('.mb-fixed-card') : document.querySelector('.pc-fixed-card')
    if (isWithinTimeRange(startTime, endTime)) {
        // 计算倒计时
        let timeLeft = endTime - getCurrentTimeTimestamp(currentTime);
        let daysLeft = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
        updateCountdownElement('count-down-interval', daysLeft);
    } else {
        const countdownElement = document.querySelector('.count-down-interval');
        countdownElement.textContent = '00';
        fixedCard.style.display = 'none';
    }
}

// 检查滚动位置并控制fixed-card的显示和隐藏
function checkScrollPositionAndShowFixedCard() {
    const scrollPosition = window.scrollY;
    const videoPlayerHeight = document.querySelector('.pc-player-block').offsetHeight;
    const imgHeight = isMobile ? document.querySelector('.mobile-player-block').offsetHeight : videoPlayerHeight;
    const backTop = document.querySelector('.back-top');
    const mbFixedCard = document.querySelector('.mb-fixed-card');
    const pcFixedCard = document.querySelector('.pc-fixed-card');

    // 显示或隐藏返回顶部按钮
    backTop.style.display = (scrollPosition > (isMobile ? imgHeight : videoPlayerHeight)) ? 'block' : 'none';

    // 检查时间范围
    if (!isWithinTimeRange(startTime, endTime)) {
        mbFixedCard.style.display = 'none'; // 确保活动时间外不显示
        pcFixedCard.style.display = 'none';
        return; // 直接返回，不再执行后面的代码
    }

    // 显示或隐藏固定卡片
    if (isMobile) {
        pcFixedCard.style.display = 'none';
        mbFixedCard.style.display = (scrollPosition > imgHeight) ? 'block' : 'none';
    } else {
        mbFixedCard.style.display = 'none';
        pcFixedCard.style.display = (scrollPosition > videoPlayerHeight) ? 'block' : 'none';
    }
}

// 平滑返回顶部
function backToTop() {
    document.querySelector('.back-top').addEventListener('click', () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth' // 实现平滑滚动
        });
    });
}

/**
 * 初始化菜单项的点击事件处理，包括高亮和滚动到相应部分的功能。
 */
function initializeMenuInteractions() {
    const menuList = isMobile ? document.querySelectorAll('.mobile-menu-content-list div') : document.querySelectorAll('.navi-block-menu li');
    const sectionIds = isMobile
        ? ['mb-activity-introduction-title', 'mb-event-progress-title', 'mb-event-description-title', 'mb-submission-principles-title', 'mb-evaluation-criteria-title', 'mb-organizer-title']
        : ['activity-introduction-title', 'event-progress-title', 'event-description-title', 'submission-principles-title', 'evaluation-criteria-title', 'organizer-title'];

    menuList.forEach((item, index) => {
        item.addEventListener('click', () => {
            // 移除所有菜单项的高亮
            menuList.forEach(li => li.classList.remove('active'));
            // 为当前点击的菜单项添加高亮
            item.classList.add('active');

            const sectionId = sectionIds[index];
            const currentURL = window.location.href;

            // 判断点击的菜单项是否为“全部作品”或“获奖公示”
            if (index === menuList.length - 2 || index === menuList.length - 1) {
                // 直接跳转到相应页面
                if (index === menuList.length - 2) {
                    window.location.href = 'all-works.ftl';
                } else {
                    window.location.href = 'award-announcement.ftl';
                }
            } else {
                // 其他菜单项的处理逻辑
                if (!currentURL.includes('index.ftl')) {
                    window.location.href = `index.ftl?section=${sectionId}`;
                    if (isMobile) closeMenu(); // 移动端关闭菜单
                } else {
                    toAnchorView(sectionId); // 在当前页面直接滚动
                    if (isMobile) closeMenu(); // 移动端关闭菜单
                }
            }
        });
    });
}

// 平滑过渡到对应区域 - 执行函数
function toAnchorView(data) {
    const $choose = document.querySelector(`.${data}`);
    if ($choose) {
        $choose.scrollIntoView({ behavior: 'smooth', block: 'start' });
        window.scrollTo({
            left: 0,
            top: $choose.offsetTop - 80,
            behavior: 'smooth'
        });
    }
}

// 控制导航菜单的sticky切换
function toggleStickyNavigation() {
    const playerBlockHeight = document.querySelector(".pc-player-block").offsetHeight;
    const menu = document.querySelector(".navi-block-menu");
    const currScrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.scrollY;
    if (currScrollTop > playerBlockHeight) {
        menu.classList.remove("navi-default");
        menu.classList.add("navi-sticky");
    } else {
        menu.classList.remove("navi-sticky");
        menu.classList.add("navi-default");
    }
}

// 背景图“立即报名”点击跳转页面
function badgeClickJump() {
    const pcUploadBtn = document.querySelector('.img-pc-upload-size')
    const mobileUploadBtn = document.querySelector('.img-mb-upload-size')
    // 绑定pc背景上传按钮点击跳转事件
    if (pcUploadBtn) {
        pcUploadBtn.addEventListener('click', function() {
            window.location.href = "upload-work.ftl";
        });
    }
    // 绑定mb背景上传按钮点击跳转事件
    if (mobileUploadBtn) {
        mobileUploadBtn.addEventListener('click', function() {
            window.location.href = "upload-work.ftl";
        });
    }
}

// 设置被点击tab高亮
function setTabActive() {
    const tabs = document.querySelectorAll('.works-block-tabs__nav div');
    const contents = document.querySelectorAll('.works-block-content');
    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            const index = tab.getAttribute('data-index');

            // 切换Tab高亮
            tabs.forEach(tab => tab.classList.remove('active'));
            tab.classList.add('active');

            // 切换内容显示
            contents.forEach(content => {
                if (content.getAttribute('data-index') === index) {
                    content.style.display = 'flex';
                } else {
                    content.style.display = 'none';
                }
            });
        });
    });
}

// 立即报名
function signUpNow() {
    const fixedCard = isMobile ? document.querySelector('.mb-fixed-card') : document.querySelector('.pc-fixed-card')
    const imgBtn = document.querySelector('.img-pc-upload-size');
    const btn = isMobile ? document.querySelector('.mb-upload-btn') : document.querySelector('.pc-upload-btn');
    if (imgBtn) {
        // 检查当前时间是否在活动时间范围内
        if (!isWithinTimeRange(startTime, endTime)) {
            fixedCard.style.display = 'none';
            imgBtn.style.display = 'none';
        } else {
            btn.addEventListener('click', () => {
                window.location.href = "upload-work.ftl";
            });
        }
    }
}

// 从其他页面点击-平滑滚动到目标部分
function scrollToSection() {
    isMobile ? toAnchorView('oeuvre-title-img-mb') : toAnchorView('oeuvre-title-img')
}

// 移动端-打开菜单
function openMenu() {
    const menuDom = document.querySelector('.mobile-menu-content');
    if (menuDom) {
        menuDom.style.display = 'flex';
        menuDom.className = `mobile-menu-content menu-content-show`;
    }
}

// 移动端-关闭菜单
function closeMenu() {
    const menuDom = document.querySelector('.mobile-menu-content');
    if (menuDom) {
        menuDom.className = `mobile-menu-content menu-content-close`;
    }
}

// 点击作品，跳转至动画宇宙-作品详情页
function goToDetailWorks () {
    const worksList = document.querySelectorAll('.works-block-content-item');
    worksList.forEach(work => {
        work.addEventListener('click', () => {
            const workManageId = work.getAttribute('data-workManageId');
            if (workManageId) {
                // 在新窗口中打开作品详情页
                window.open(`http://172.18.202.146/works/details?id=${workManageId}`, '_blank');
            }
        })
    })
}

window.addEventListener('scroll', () => {
    updateFixedCardAndCountdown()
    checkScrollPositionAndShowFixedCard()
    // 控制导航菜单的sticky切换
    toggleStickyNavigation()
});

window.addEventListener('DOMContentLoaded', () => {
    // 检查屏幕尺寸并设置类名
    updateLayoutClass()
    // 从其他页面点击-平滑滚动到目标部分
    scrollToSection()
    // 根据当前时间更新 fixed-card 的显示/隐藏状态和倒计时
    updateFixedCardAndCountdown()
    // 平滑返回顶部
    backToTop()
    // 背景图“立即报名”点击跳转页面
    badgeClickJump()
    // 立即报名
    signUpNow()
    // 初始化菜单项的点击事件处理，包括高亮和滚动到相应部分的功能。
    initializeMenuInteractions()
    // 设置被点击tab高亮
    setTabActive()
    // 检查滚动位置并控制fixed-card的显示和隐藏
    checkScrollPositionAndShowFixedCard()
    // 点击作品，跳转至动画宇宙-作品详情页
    goToDetailWorks ()
    // 隐藏/显示获奖公示菜单项
    toggleAwardMenuVisibility()
})

// 监听窗口大小变化
window.addEventListener('resize', () => {
    // 重新检查屏幕尺寸
    isMobile = updateIsMobile();
    updateLayoutClass()
    // scrollToSection()
    updateFixedCardAndCountdown()
    // backToTop()
    badgeClickJump()
    signUpNow()
    initializeMenuInteractions()
    setTabActive()
    checkScrollPositionAndShowFixedCard()
    toggleAwardMenuVisibility()
})
